<script setup name="formFileReport">
	import {
		reactive,
	} from 'vue';

	import api from '@/api/api';
	import util from '@/utils/util';

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();
	// 
	const list = reactive([{
		name: '今日使用人次数',
		num: ['65,679'],
	}, {
		name: '今日使用实验室数量',
		num: ['67,876'],
	}, {
		name: '今日实验课程数量',
		num: ['98,354'],
	}, {
		name: '本周使用人次数',
		num: ['65,679'],
	}, {
		name: '本周使用实验室数量',
		num: ['65,679'],
	}, {
		name: '本周实验课程数量',
		num: ['65,679'],
	}])
	// 回调
	const emit = defineEmits(["change", ""]);
</script>

<template>
	<div class="statistics-list" style="height: 100%;">
		<div class="statistics-list-li" :class="{'k':index>2}" v-for="(item,index) in list" :key="index">
			<p>{{item.name}}</p>
			<p class="num">{{item.num[0]}}</p>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.statistics-list {
		display: grid;
		gap: 5px;
		grid-template-columns: repeat(3, 1fr);

		&-li {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 90px;
			padding: 0 30px;
			background: inherit;
			background-color: rgba(0, 144, 255, 0.09803921568627451);
			box-sizing: border-box;
			border-width: 1px;
			border-style: solid;
			border-color: rgba(71, 179, 254, 1);
			border-radius: 15px;
			border-top-left-radius: 0px;
			border-bottom-right-radius: 0px;
			font-family: "Microsoft YaHei", sans-serif;
			color: #FFF000;
			font-size: 16px;

			.num {
				font-size: 34px;
				font-family: "Impact Normal", "Impact", sans-serif;
				font-weight: 400;
				font-style: normal;
				color: #FFFFFF;
			}

			&.k {
				border-radius: 0;
			}
		}
	}
</style>